/*
 * @Author: xiaosihan 
 * @Date: 2024-07-14 20:22:24 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-06 01:57:37
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./factoryLogin.module.less";
import hashHistory from "@hashHistory";
import { Button } from "antd";
import FactoryHeader from "../FactoryHeader/FactoryHeader";
import img1PNG from "./img1.png";
import img2PNG from "./img2.png";
import img3PNG from "./img3.png";
import img4PNG from "./img4.png";
import img5PNG from "./img5.png";
import LoginBox from "./LoginBox/LoginBox";
import factoryStore from "../factoryStore";
import RegisterBox from "./RegisterBox/RegisterBox";
import ImproveInfo from "./ImproveInfo/ImproveInfo";


interface Iprops {
    children?: ReactNode
}

// 工厂端登录
export default function FactoryLogin() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [loginStatus, setLoginStatus] = useState(factoryStore.loginStatus);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setLoginStatus(factoryStore.loginStatus);
    }, { delay: 10 }), []);

    return (
        <div className={styles.factoryLogin} >
            <FactoryHeader />

            <span className={styles.title} >与刻澜波工一起发展您的业务</span>
            <span className={styles.subTitle} >与我们的全球客户群建立有价值的关系，获得更多订单，赚取更多利益。</span>

            <img alt="" src={img1PNG} className={styles.img1} />
            <img alt="" src={img2PNG} className={styles.img2} />
            <img alt="" src={img3PNG} className={styles.img3} />
            <img alt="" src={img4PNG} className={styles.img4} />
            <img alt="" src={img5PNG} className={styles.img5} />

            {loginStatus === "login" && <LoginBox />}
            {loginStatus === "register" && <RegisterBox />}
            {["accountInfo", "companyInfo", "made", "introduce"].includes(loginStatus) && <ImproveInfo />}

        </div>
    );

}